<template>
  <div class="infoWrapper">
    <div class="info">
      <div class="left">
        <div class="infoItem">
          <div>角色：</div>
          <el-select v-model="userType.activeItem" placeholder="角色">
            <el-option
              v-for="item in userType.data"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="infoItem">
          <div>学校：</div>
          <el-select
            v-model="school.activeItem"
            placeholder="学校"
            style="width: 250px"
          >
            <el-option
              v-for="item in school.data"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="infoItem">
          共<span>{{ instructSum }}</span
          >条指令
        </div>
      </div>
      <div class="right">
        <el-select
          v-model="search.activeItem"
          class="infoItem"
          style="width: 170px"
        >
          <el-option
            v-for="item in search.data"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="searchInstructStr"
          placeholder="功能、数据名称/常用命令词"
          class="input infoItem"
          clearable
          @keyup.enter.native="searchInstruct"
          @clear="searchInstruct"
        >
          <template #append>
            <el-button :icon="Search" @click="searchInstruct" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="content">
      <slot
        :tableData="tableData"
        :refresh="refresh"
        :schoolMap="schoolMap"
      ></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import { searchServer } from "@/api/manage";
import { getAllSchoolInfo } from "@/utils/CommonRequest";
import { Search } from "@element-plus/icons-vue";
import { ElLoading, ElMessage } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
import { oneNetSearchTypeData, oneNetUserTypeSelectData } from "../enum";

const props = defineProps({});

const userType = reactive({
  data: [{ label: "全部角色", value: "all" }, ...oneNetUserTypeSelectData],
  activeItem: "all",
});
const school = reactive({
  data: [],
  activeItem: "",
});
const search = reactive({
  data: oneNetSearchTypeData,
  activeItem: "serverName",
});
const instructSum = ref(0);
const searchInstructStr = ref("");
const tableData = ref([]);
const schoolMap = ref(new Map());

const refresh = () => {
  fetchInstruct({
    userType: userType.activeItem,
    schoolId: school.activeItem,
  });
};

defineExpose({ refresh });
const emits = defineEmits(["visibleChange"]);

onMounted(async () => {
  const { ErrCode, Data } = await getAllSchoolInfo();
  if (ErrCode !== 0) {
    ElMessage.error("获取学校信息失败");
    return;
  }
  const schoolData = Data?.map((v) => {
    schoolMap.value.set(v.SchoolID, v.schoolName);
    return {
      value: v.SchoolID,
      label: `${v.schoolName}(${v.SchoolID})`,
    };
  });
  school.data = schoolData;
  school.activeItem = schoolData?.[0]?.value ?? "";
});

const fetchInstruct = async (d) => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "transparent",
  });
  if (d.userType === "all") {
    d.userType = "";
  }

  try {
    const { data, success, msg } = await searchServer({
      ...d,
      [search.activeItem]: searchInstructStr.value,
    });
    if (!success) {
      throw new Error("获取指令失败,接口返回:" + msg);
    }
    tableData.value = data;
    instructSum.value = data.length;
  } catch (e) {
    ElMessage.error("获取数据失败");
  }
  loading.close();
};

const searchInstruct = () => {
  refresh();
};
watch(
  () => school.activeItem,
  (newVal) => {
    fetchInstruct({
      schoolId: newVal,
      userType: userType.activeItem,
    });
  }
);
watch(
  () => userType.activeItem,
  (newVal) => {
    fetchInstruct({
      schoolId: school.activeItem,
      userType: newVal,
    });
  }
);
</script>

<style lang="scss" scoped>
.infoWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .info {
    margin: 15px 30px;
    display: flex;
    justify-content: space-between;
    :deep(.el-select) {
      width: 130px;
    }
    .infoItem {
      display: flex;
      align-items: center;
    }
    .infoItem + .infoItem {
      margin-left: 20px;
    }
    .left {
      display: flex;
    }
    .right {
      display: flex;
      .input {
        width: 350px;
      }
      .createBtn {
      }
      :deep() {
        .el-select__wrapper {
          width: 100%;
        }
      }
    }
  }
  .content {
    flex: 1;
    min-height: 0;
  }
}
</style>
